<template>
    <div class="e-chart" ref="echart"></div>
</template>

<script>
import loginHeaderVue from '../../common/loginHeader.vue';
    // let echarts = require('echarts/lib/echarts');
    // require("echarts/lib/chart/line");
    // require("echarts/lib/component/tooltip");

    export default {
        name: "chart-view-pie",
        props: {
            colors: {
                type: Array,
                default() {
                    return [];
                }
            },
            source: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            autoRefresh: {
                type: Boolean,
                default: false
            },
             name: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                myChart: null,
                option: null,
            }
        },
        methods: {
            initChart() {
                let _scope = this;
                if (_scope.myChart != null) {
                    _scope.myChart.clear();
                }
                if (_scope.source.length > 1) {
                    this.option = {
                        // title:{
                        //   text:this.name,
                        //   textStyle:{color :'#fff',fontSize:14}
                        // },
                        color: _scope.colors,
                        grid: {
                            containLabel: true,
                            top: 40,
                            right: 24,
                            bottom: 12,
                            left: 12
                        },
                        legend: {
                            type: "scroll",
                            icon: "circle",
                            textStyle: {
                                color: "#959595"
                            },
                            pageTextStyle: {
                                color: "#959595"
                            },
                            pageIconColor: '#959595',
                            pageIconInactiveColor: '#2f4554'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{c} ({d}%)"
                        },
                        textStyle: {
                            color: "#959595"
                        },
                        toolbox: {
                        show: true,
                        iconStyle:{
                          color:'#fff',
                          borderColor:'#fff',
                        },
                        feature: {
                            myFull: {
                                show: true,
                                title: '全屏查看',
                                icon: 'path://M85.333333 682.666667v128a128 128 0 0 0 128 128h128a42.666667 42.666667 0 0 0 0-85.333334H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666666v-128a42.666667 42.666667 0 0 0-85.333334 0z m597.333334 256h128a128 128 0 0 0 128-128v-128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 1-42.666666 42.666666h-128a42.666667 42.666667 0 0 0 0 85.333334z m256-597.333334V213.333333a128 128 0 0 0-128-128h-128a42.666667 42.666667 0 0 0 0 85.333334h128a42.666667 42.666667 0 0 1 42.666666 42.666666v128a42.666667 42.666667 0 0 0 85.333334 0zM341.333333 85.333333H213.333333a128 128 0 0 0-128 128v128a42.666667 42.666667 0 0 0 85.333334 0V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h128a42.666667 42.666667 0 0 0 0-85.333334z',
                                onclick (e){
                                    _scope.fullscreenChart()
                                }
                            }
                        }
                        },
                        dataset: {
                            source: _scope.source
                        },
                        series: _scope.formatterSeries()
                    };

                    if (this.autoRefresh) {
                        this.option.dataZoom = [
                        {
                            type: 'slider',
                            start: 67,
                            end: 100
                        },
                        ]
                        this.option.grid.bottom = '20%'
                        this.option.toolbox.feature.dataZoom={
                            yAxisIndex: false,
                            show:false,
                        }
                    }
                    _scope.myChart = this.$echarts.init(_scope.$refs.echart);
                    _scope.myChart.setOption(this.option);
                    window.addEventListener("resize", () => {
                        _scope.myChart.resize();
                    });
                }else{
                  this.option = {
                    title: {
                      show: _scope.source.length === 1,
                      extStyle: {
                        color: "white",
                        fontSize: 20
                      },
                      text: "暂无数据",
                      left: "center",
                      top: "center",
                      color: "#ffffff",
                      textStyle:{
                        color: "#ffffff"
                      }
                    },
                    color: _scope.colors,
                    legend: {
                      type: "scroll",
                      icon: "circle",
                      textStyle: {
                        color: "#959595"
                      },
                      pageTextStyle: {
                        color: "#959595"
                      },
                      pageIconColor: '#959595',
                      pageIconInactiveColor: '#2f4554'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: "{c} ({d}%)"
                    },
                    textStyle: {
                      color: "#959595"
                    },
                    dataset: {
                      source: _scope.source
                    },
                    series: _scope.formatterSeries()
                  };

                  _scope.myChart = this.$echarts.init(_scope.$refs.echart);
                  _scope.myChart.setOption(this.option);
                  window.addEventListener("resize", () => {
                    _scope.myChart.resize();
                  });
                }
            },

            // 初始化 series
            formatterSeries() {
                let _scope = this;
                let _source = _scope.source;
                let _series = [];
                for (let i = 0; i < _source[0].length - 1; i++) {
                    _series.push({
                        type: "pie",
                        center: ["50%", "53%"],
                        radius: ["40%", "55%"],
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        }
                    });
                }

                return _series;
            },
            fullscreenChart(tag = false){
                this.$emit('fullscreen',this.option, tag)
            },
            updateChart(){
                this.myChart.setOption({
                  dataset: {
                    source: this.source
                  }
                });
            }
        },
        watch: {
            source: {
                handler() {
                    if (!this.option || (this.option.title && this.option.title.text === '暂无数据' && this.source.length)) {
                        this.initChart();
                        this.fullscreenChart(true)
                    }else{
                        this.updateChart()
                        this.fullscreenChart(true)
                    }
                },
                deep: true,
                immediate: false,
            },
        },
    }
</script>
